<template>
  <div>
    <c-title :hide="false" text="订单支付"></c-title>
    <div class="pay-box">
      <div class="pay-money">
        <div class="top">支付金额:</div>
        <div class="mid">
          <span class="s">{{ $i18n.t("money") }}</span> <span>{{ money }}</span>
        </div>
        <div class="bottom">
          支付流水号:<span>{{ order_sn }}</span>
        </div>
      </div>
    </div>
    <!-- 新支付页面 -->
    <div id="payBtnList">
      <div class="sureBtn" @click="sureBtn" v-if="money == '0.00'">{{ confirmPayText }}</div>

      <div class="title" v-if="money > 0">
        <span class="line"></span>
        <span>支付方式</span>
      </div>
      <template v-if="money > 0">
        <!--yz_pay 包括支付需要的弹窗和红包-->
        <template v-if="buttons">
          <van-radio-group v-model="radio" @change="radioChange">
            <div class="mod_btns" v-for="(btn, i) in buttons" :key="i" v-show="btn.value != 57 && !popupSpecs">
              <a class="mod_btn" @click.stop="radio = btn.value">
                <i class="iconfont" :class="getIconUrl(btn)"></i>
                <div v-if="btn.value == 3" style="display: flex; flex-direction: column;">
                  <span>{{ btn.name }}</span>
                  <span v-if="balanceNum"
                    >可用:<span style="color: #f76d6d;">{{ balanceNum }}</span
                    >{{ $i18n.t("元") }}</span
                  >
                </div>
                <span v-if="btn.value != 59 && btn.value != 71 && btn.value != 3">{{ btn.name }}{{ typename }}</span>
                <span v-if="(btn.value == 59 || btn.value == 71) && btn.value != 3">{{ btn.name }}</span>
              </a>
              <van-radio :name="btn.value" checked-color="#f15353"></van-radio>
            </div>
          </van-radio-group>
        </template>
      </template>
      <div @click="submit" class="newSubTn" :class="[fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">立即支付</div>
    </div>
    <pay-keyboard :payKeyboardShow.sync="popupSpecs" @complete="onInput" @close="changePopupSpecs"></pay-keyboard>
  </div>
</template>
<script>
import payKeyboard from "components/payKeyboard";
export default {
  components: { payKeyboard },
  data() {
    return {
      balance: 0,
      payParams: "",
      info_form: {},
      order_sn: "",
      money: "",
      buttons: [],
      typename: "",
      pay_sn: "订单编号",
      order_pay_id: "",
      uid: "",
      // 余额字样
      balanceLang: this.fun.getBalanceLang(),

      is_cps: false,
      radio: "",
      isclick:false,
      //余额支付密码
      popupSpecs:false,
      payarr:''
    };
  },
  activated() {
    console.log(this.$route.params);
    if (this.$route.params.sn) {
      this.getData();
    }
  },
  methods: {
    onInput(e){
      this.keyboardDone(e);
    },
    keyboardDone(val) {
      this.getVerifyPassword(val);
    },
    getVerifyPassword(pwd){
      // order.pay.wechatPay
      $http.get("payment.password.check", { password: pwd }, "").then(
        (response) => {
          if (response.result == 1) {
            this.isclick = false;
            // 密码正确
            console.log('dddddddddd',response.data)
            this.payarr = pwd;
            this.submit();
          } else {
            this.isclick = false;
            this.payarr = '';
            this.$dialog
              .confirm({ message: response.msg })
              .then(() => {
                if (response.data.code == 2001) {
                  // 商城支付密码设置未开启
                  // this.$router.go(-1)
                } else if (response.data.code == 2002) {
                  // 用户未设置支付密码
                  // 去设置密码
                  this.$router.push(this.fun.getUrl("set_balance_password", {}));
                } else if (response.data.code == 2003) {
                  // 支付密码错误
                }
              })
              .catch(() => {
                if (response.data.code == 2001) {
                  // 商城支付密码设置未开启
                } else if (response.data.code == 2002) {
                  // 用户未设置支付密码
                } else if (response.data.code == 2003) {
                  // 支付密码错误
                }
              });
          }
        });
    },
    changePopupSpecs(){
      this.isclick = false;
    },
    submit() {
      if(this.isclick){
        return
      }
      this.isclick = true;
      if(this.radio == 3 && !this.payarr){
        let keyOrr = this.refChange(this.radio);
        if(keyOrr.need_password || keyOrr.other?.need_password){
          //需要密码
          this.popupSpecs = true;
          return
        }
      }
      $http
        .get("plugin.crowdfunding.frontend.activity-order.pay", { order_sn: this.$route.params.sn, amount: this.money, pay_type_id: this.radio }, "加载中")
        .then(response => {
          if (response.result === 1) {
            if (response.data.config) {
              this.WXPay(response.data.config);
            }else{
              this.$dialog.alert({ message: response.msg }).then(() => {
                this.isclick = false;
                this.$router.push(this.fun.getUrl("crowd_activity", {}));
              });
            }
          } else {
            this.isclick = false;
            this.$dialog.alert({ message: response.msg });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    radioChange(e) {
      for (let key in this.buttons) {
        if (this.buttons[key].value == e) {
          this.submitArr = this.buttons[key];
          this.radio = this.buttons[key].value;
        }
      }
    },
    refChange(e){
      for (let key in this.buttons) {
        if (this.buttons[key].value == e) {
          return this.buttons[key];
        }
      }
    },
    getData() {
      $http
        .get("plugin.crowdfunding.frontend.pre-activity-order.detail", { order_sn: this.$route.params.sn }, "加载中")
        .then(response => {
          if (response.result === 1) {
            console.log(response);
            this.order_sn = response.data.order_sn;
            this.money = response.data.amount;
            this.buttons = response.data.buttons;
            if (this.buttons[0]) {
              this.radio = this.buttons[0].value;
            }
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getIconUrl(item) {
      let icon_url = "";
      switch (item.code) {
        case "wechatPay":
        case "cloudPayWechat":
        case "wechatApp":
        case "yunPayWechat":
        case "wftPay":
        case "yop":
        case "convergePayWechat":
        case "WechatScan":
        case "WechatFace":
        case "WechatJsapi":
        case "wechatAggregatePay":
        case "convergePaySeparate":
        case "wechatCpsAppPay":
          icon_url = "icon-pay_wechat";
          break;
        case "alipay":
        case "cloudPayAlipay":
        case "alipayApp":
        case "yunPayAlipay":
        case "wftAlipay":
        case "convergePayAlipay":
        case "yopAlipay":
        case "AlipayScan":
        case "AlipayFace":
        case "AlipayJsapi":
        case "alipayAggregatePay":
        case "convergeAliPaySeparate":
        case "sandpayAlipay":
          icon_url = "icon-pay_alipay";
          break;
        case "balance":
        case "MemberCard":
          icon_url = "icon-pay_yue";
          break;
        case "remittance":
          icon_url = "icon-pay_remittance";
          break;
        case "anotherPay":
          icon_url = "icon-pay_otherpay";
          break;
        case "UsdtPay":
          icon_url = "icon-pay_utsd";
          break;
        case "DepositPay":
          icon_url = "icon-pay_prepay";
          break;
        case "convergeQuickPay":
          icon_url = "icon-pay_quick";
          break;
        case "COD":
          icon_url = "icon-pay_cashondelivery";
          break;
        case "dcmScanPay":
          icon_url = "icon-fontclass-saomazhifu";
          break;
        case "parentPayment":
          icon_url = "icon-fontclass-daifu1";
          break;
        case "leshuaAlipay":
          icon_url = "icon-pay_alipay";
          break;
        case "leshuaWechat":
          icon_url = "icon-pay_wechat";
          break;
        default:
          icon_url = "icon-pay_default";
          break;
      }
      return icon_url;
    },
    WXPay(payParams, cbHref) {
      let that = this;
      wx.chooseWXPay({
        appId: payParams.appId,
        timestamp: payParams.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: payParams.nonceStr, // 支付签名随机串，不长于 32 位
        package: payParams.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
        signType: payParams.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: payParams.paySign, // 支付签名
        success: res => {
          // 支付成功后的回调函数
          if (res.errMsg == "chooseWXPay:ok") {
            this.$router.push(this.fun.getUrl("crowd_activity", {}));
            this.isclick = false;
          } else {
            that.$dialog.alert({
              message: "支付失败"
            });
            that.handlePayError();
            this.isclick = false;
            console.log(payParams, "支付失败参数咋样");
          }
        },
        cancel: res => {
          // 支付取消
          that.handlePayError();
        },
        fail: res => {
          that.$dialog.alert({
            message: "支付失败，请返回重试"
          });
          that.handlePayError();
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.newSubTn {
  width: 80%;
  height: 3rem;
  position: fixed;
  bottom: 1rem;
  left: 10%;
  border-radius: 0.3rem;
  background-color: #f15353;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mod_btns {
  margin: 0 0.3125rem;
  border-bottom: solid 1px #f4f4f4;
  text-align: left;
  padding-bottom: 0.875rem;
  padding-top: 0.875rem;
  padding-left: 0.5625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .fa {
    font-size: 18px;
    color: #999;
  }

  .mod_btn {
    display: flex;
    align-items: center;
    flex: 1;
  }
}

.mod_btns:last-child {
  border-bottom: none;
}

#payBtnList {
  // width: 21.56rem;
  padding: 0.75rem 0;
  background-color: #fff;
  border-radius: 0.43rem;
  margin: 0 1rem;
  margin-bottom: 2.56rem;
  overflow: hidden;
  box-sizing: border-box;

  .title {
    color: #f87070;
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;

    .line {
      height: 0.875rem;
      width: 0.187rem;
      background-color: #f87070;
      display: inline-block;
      margin-right: 0.875rem;
    }
  }
}

.pay-box {
  background: #fff;
  // width: 21.5625rem;
  border-radius: 0.4375rem;
  margin: 0.5625rem 1rem;

  .account {
    height: 2.875rem;
    border-bottom: solid 1px #f4f4f4;
    display: flex;
    justify-content: space-between;
    padding: 1rem 0.6875rem;

    .span-first {
      color: #999;
      font-size: 12px;
    }

    .span-two {
      color: #333;
      font-size: 18px;

      .b {
        display: inline-block;
        font-size: 12px;
        color: #333;
      }
    }
  }

  .pay-money {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    margin: 0 auto;

    .top {
      color: #999;
      font-size: 12px;
    }

    .mid {
      margin: 1rem 0;
      color: #f76d6d;
      font-size: 24px;

      .s {
        display: inline-block;
        font-size: 18px;
      }
    }

    .bottom {
      font-size: 12px;
      color: #999;
    }
  }
}

.icon-pay_quick {
  color: #46e0d1;
  font-size: 28px;
  margin-right: 1rem;
}

.icon-pay_alipay {
  color: #29a1f7;
  font-size: 28px;
  margin-right: 1rem;
}

.icon-pay_yue {
  color: #ff7433;
  font-size: 28px;
  margin-right: 1rem;
}

.icon-pay_wechat {
  color: #09bb07;
  font-size: 28px;
  margin-right: 1rem;
}

.icon-pay_otherpay {
  color: #ffba00;
  font-size: 28px;
  margin-right: 1rem;
}

.icon-pay_remittance {
  color: #ff692f;
  font-size: 28px;
  margin-right: 1rem;
}

.icon-pay_utsd {
  color: #9000ff;
  font-size: 28px;
  margin-right: 1rem;
}

.icon-pay_prepay {
  color: #9000ff;
  font-size: 28px;
  margin-right: 1rem;
}

.icon-pay_default {
  color: #538ff9;
  font-size: 28px;
  margin-right: 1rem;
}

.icon-pay_cashondelivery {
  color: #ed3800;
  font-size: 24px;
  margin-right: 1rem;
}

.icon-fontclass-daifu1 {
  color: #f15353;
  font-size: 24px;
  margin-right: 1rem;
}

.icon-fontclass-saomazhifu {
  color: #f4a556;
  font-size: 24px;
  margin-right: 1rem;
}

.pcStyle {
  width: 375px;
  margin: 0 auto;
  left: 50% !important;
  margin-left: -187.5px;
}
</style>